<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{margin: 0px;
              padding: 0px;}
             .I{height: 500px;
                background: url('images.wx/wxback1.jpg') repeat-x;
                 }
             .II{margin: 48px auto 0px;
                 width: 972px;
                 height: 408px;
                 }
             .III{margin: 0px auto;
                  border-top: 1px solid #d4dadf;
                  width: 972px;
                  height: 72px;}
             .A1{margin: 0px auto;
                 width: 972px;
                 height: 75px;
                 }
             .A1 img{float: left;
                     margin: 14px 0px;
                     width: 133px;
                     height: 47px;}
             .A1 li{list-style: none;
                    float: right;}
             .A1 span{float: left;
                     margin: 25px 12px;
                   }
             .A1 span :hover{background: black;
                           border-radius: 10px;
                           }
             .A1 a{text-decoration: none;
                   font-size: 14px;
                   color: #ffffff;}
             .A2{margin: 0px auto;
                 width: 972px;
                 height: 430px;}
             .A2-1{width: 345px;
                   float: left;}
             .A2-1 h1{float: left;
                      margin: 56px 0px 0px;
                      font-size: 26px;}
             .A2-1 ul{float: left;}
             .A2-1 p{margin-top: 15px;
                      color:#979797;}
             .A2-2{float: left;
                     margin-top: 22px;
                     width: 223px;
                     height: 64px;
                     background: url('images.wx/mianfei.png') no-repeat;
                     cursor: pointer;
                     }
             .A2-3 ul{float: left;}
             .A2-3 li{font-size: 14px;
                      border-radius: 5px;
                      margin: 10px 20px;
                      color: #999999;}
             .A2-3 a{color: #609700;}
             .A2-4{float: right;
                   width: 569px;
                   height: 425px;}
             .B1{
                 height: 456px;
                 float: left;}
            .B1-1{
                width: 628px;
                float: left;
            }
            .B1-1 img{
                width: 628px;
            }
            .B1-1 li{
                float: left;
                width:216px;
            }
            .B1-1 .last{
                width: 194px;
            }
             .B1 h1{font-size: 14px;}
             .B1 p{font-size: 14px;
                   margin: 7px 0px;
                   color: #999999;
                   } 
             .B1 a{font-size: 14px;
                   color: #609700;
                   text-decoration: none;}
             .B1 li{list-style: none;
                    }
             .B2{
                 
                 height: 409px;
                 float: right;
                 }
            .B2 h6{
                font-size: 15px;
            }
            .B2 li{
                line-height: 30px;
                font-size: 14px;
            }
            .B2 i{
                color:red;
            }
            .B2 span{
                float: right;
            }
             .III .left{
                float: left;
            }
            .III .right{
                float: right;
            }
            .III .bottom{
                float: left;
                width: 968px;
            }         
        </style>
    </head>
    <body>
        <div class="I">
            <div class="A1">
                <img src="images.wx/wxlogo.png" alt="">
                <li>
                    <span>
                        <a href="">首页</a>
                    </span>
                    <span>
                        <a href="">帮助与反馈</a>
                    </span>
                    <span>
                        <a href="">公众平台</a>
                    </span>
                    <span>
                        <a href="">开放平台</a>
                    </span>
                    <span>
                        <a href="">微信支付</a>
                    </span>
                    <span>
                        <a href="">微信广告</a>
                    </span>
                    <span>
                        <a href="">企业微信</a>
                    </span>
                    <span>
                        <a href="">表情开放平台</a>
                    </span>
                    <span>
                        <a href="">微信网页版</a>
                    </span>
                </li>
                </div>
                <div class="A2">
                   <div class="A2-1"> <h1>微信，是一个生活方式</h1>
                     <ul>
                        <p> 超过十亿人使用的手机应用</p>
                        <p>支持发送语音短信、视频、图片和文字</p>
                        <p>可以群聊，仅耗少量流量，适合大部分智能手机</p>
                     </ul>
                     <div class="A2-2">
                        <a href="https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&nav=download&t=weixin_download_list&loc=readtemplate,weixin,body,6"></a>
                     </div>
                     <div class="A2-3">
                        <span>
                            <ul>
                           <li><a href=""> 忘记了微信帐号或密码？</a><br></li>
                           <li><a href=""> 自助解除登录或功能限制</a><br></li>
                           <li><a href=""> 冻结或解冻微信帐号</a><br></li></li>
                            </ul>
                        </span>
                     </div>
                    </div>
                    <div class="A2-4">
                        <img src="images.wx/ipo.png" alt="">
                    </div>
                </div>
        </div>
        <div class="II">
            <div class="B1">
                <div class="B1-1">
                    <img src="images.wx/B.png" alt="">
                    <ul>
                        <li>
                           <h6>微信网页版</h6>
                           <p>扫一扫二维码</p>
                           <p>就能在浏览器上使用微信</p>
                            <a href="">了解更多</a>
                        </li>
                        <li>
                            <h6>微信网页版</h6>
                            <p>就能在浏览器上使用微信</p>
                             <a href="">了解更多</a>
                         </li>
                         <li class="last">
                            <h6>微信网页版</h6>
                            <p>扫一扫二维码</p>
                            <p>就能在浏览器上使用微信</p>
                             <a href="">了解更多</a>
                         </li>
                    </ul>
                </div>
            <div class="B2">
                <h6>最新消息</h6>
                <ul>
                    <!-- span b u i 实现小元素行内标签用法一模一样 -->
                    <li>微信 8.0.2 for Android 正式版发布 <i>(New)</i> <span>03-25</span></li>
                    <li>微信 3.2.1 for Windows 正式版发布 <i>(New)</i> <span>03-22</span></li>
                    <li>微信 8.0.2 for iOS 正式版发布 <i>(New)</i> <span>02-02</span></li>
                    <li>微信 2.6.1 for Mac 正式版发布 <i>(New)</i> <span>01-20</span></li>
                    <li>关于部分 iOS 9 用户无法更新微信</i> <span>01-28</span></li>
                    <li>微信外部链接内容管理规范 <i>(New)</i> <span>02-11</span></li>
                    <li>微信网页版 2.1 版本发布 <i>(New)</i> <span>01-17</span></li>
                    <li>微信表情开放平台上线 <i>(New)</i> <span>07-29</span></li>
                    <li>官方辟谣公众号开通 <i>(New)</i> <span>10-28</span></li>
                    <li>查看更多</li>
                </ul>
            </div>
            </div>
        </div>
        <div class="III">
            <p class="left">关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引 </p>
            <p class="right"> 简体中文 |  繁體中文 |  English</p>
            <p class="bottom"> © 1998 - 2021 Tencent Inc. All Rights Reserved</p>
            </div>
    </body>
</html>